@()(implicit request: play.api.mvc.RequestHeader)
@main("Enrichment analysis") {

	<style>
			.tab-pane form {
				margin-top: 30px;
			}

	</style>

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Enrichment analysis</h2>
		</div>
	</div>

	<div class="row">

		<div class="tab-pane active" id="kegg">
			<form class="form-horizontal" method="get" id="form">

				<div class="form-group">
					<label class="control-label col-sm-2">Method:</label>
					<div class="col-sm-4">
						<select class="form-control" name="anaMethod">
							<option value="kegg">KEGG</option>
							<option value="go">GO</option>

						</select>
					</div>
				</div>

				<div class="form-group" id="queryContent">
					<label class="control-label col-sm-2">Enter gene id:</label>
					<div class="col-sm-8">
						<textarea name="geneId" id="geneId" class="form-control" rows="5"></textarea>
						<span class="help-block">
							e.g.,&nbsp;<a href="javascript:void(0);" ><em class="myShowExample" id="egGeneId">
							example</em></a></span>

					</div>
				</div>

				<div class="form-group">
					<label class="control-label col-sm-2">Or, upload file:</label>
					<div class="col-sm-8">
						<input id="input-1" type="file" class="file control-label" name="file" data-show-preview="false"
						data-show-upload="false">
						<span class="help-block"><a class="myShowExampleFile"><em>
							Example file</em></a></span>
					</div>
				</div>

				<div class="form-group">
					<label class="control-label col-sm-2">Background:</label>
					<div class="col-sm-4">
						<select class="form-control myChange" name="database">

							<option value="Macadamia_integrifolia" >Macadamia integrifolia</option>

						</select>

					</div>
				</div>

				<div class="form-group" style="display: none">
					<label class="control-label col-sm-2">Statistical test:</label>
					<div class="col-sm-4">
						<select class="form-control" name="method">
							<option value="b">binomial test</option>
							<option value="c">chi-square test</option>
							<option value="h" selected="selected">hypergeometric test / Fisher's exact test</option>
						</select>
					</div>

					<label class="control-label col-sm-2">FDR correction:</label>
					<div class="col-sm-3">
						<select class="form-control" name="fdr">
							<option value="BH" >Benjamini and Hochberg</option>
							<option value="BY">Benjamini and Yekutieli</option>
							<option value="QVALUE" selected="selected">QVALUE</option>
						</select>
					</div>

				</div>

				<div class="form-group" style="display: none">

					<label class="control-label col-sm-2">P-value cutoff:</label>
					<div class="col-sm-2">
						<input class="form-control" name="pValue" id="pValue" value="0.05">
					</div>
					<div style="display: none">
						<label class="control-label col-sm-2">Cutoff number:</label>
						<div class="col-sm-2">
							<input class="form-control" name="cutoff" id="cutoff" value="5">
						</div>
					</div>
				</div>

				<div class="form-group">
					<div class="actions col-sm-offset-2 col-sm-2">
						<button type="button" class="btn btn-primary mySearch" style="width: 90%;" id="search" >
							Run</button>
					</div>

					<div class="actions  col-sm-2">
						<button type="reset" class="btn btn-primary" style="width: 90%;">
							Reset</button>
					</div>
				</div>

			</form>


		</div>

	</div>

	<div id="result">
		<hr>

		<div id="keggResult" style="display: none">
			<h4>KEGG Enrich result:</h4>
			<div class="table-responsive" >


				<label>Select the columns to display:</label>
				<div id="checkbox" class="checkbox">

				</div>

				<div style="display: none;
					margin-bottom: 10px">Filtering conditions:
					<span id="filterCondition"></span>
				</div>

				<div style="display: none;
					margin-bottom: 10px">Sorting conditions:
					<span id="sortCondition"></span>
				</div>

				<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
				data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true"
				style="word-wrap: break-word"
				>
					<thead>

					</thead>
				</table>

				<div id="allFilterContent"></div>

			</div>

			<h4>Bar plot:</h4>

			<div class="charts">

				<div id="download" style="margin-top: 20px">
					<button type="button" class="btn btn-primary downloadPng" data-value="ko_dodge.png"
					style="margin-bottom: 10px">
						<i class="fa fa-download"></i>&nbsp;download
					</button>
				</div>
				<div id="barChart">
					<div>no picture result！</div>
				</div>

			</div>

			<h4>Enrich plot:</h4>

			<div class="charts">

				<div id="download" style="margin-top: 20px">
					<button type="button" class="btn btn-primary downloadPng" data-value="ko.Ko.enrich.png"
					style="margin-bottom: 10px">
						<i class="fa fa-download"></i>&nbsp;download
					</button>
				</div>
				<div id="enrichChart">
					<div>no picture result！</div>
				</div>

			</div>

		</div>

		<div id="goResult" style="display: none;">

			<h4>GO Enrich result:</h4>

			<div class="table-responsive" >

				<label>Select the columns to display:</label>
				<div id="checkbox" class="checkbox">

				</div>

				<div style="display: none;
					margin-bottom: 10px">Filtering conditions:
					<span id="filterCondition"></span>
				</div>

				<div style="display: none;
					margin-bottom: 10px">Sorting conditions:
					<span id="sortCondition"></span>
				</div>

				<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
				data-toolbar="#goToolbar" data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true"
				style="word-wrap: break-word"
				>
					<thead>

					</thead>
				</table>

				<div id="allFilterContent"></div>

			</div>

			<h4>Bar plot:</h4>

			<div class="charts">

				<div id="download" style="margin-top: 20px">
					<button type="button" class="btn btn-primary downloadPng" data-value="go_stack.png"
					style="margin-bottom: 10px">
						<i class="fa fa-download"></i>&nbsp;download
					</button>
				</div>
				<div id="barChart">
					<div>no picture result！</div>
				</div>

			</div>

			<h4>Enrich plot:</h4>

			<div class="charts">

				<div id="download" style="margin-top: 20px">
					<button type="button" class="btn btn-primary downloadPng" data-value="go.Go.enrich.png"
					style="margin-bottom: 10px">
						<i class="fa fa-download"></i>&nbsp;download
					</button>
				</div>
				<div id="enrichChart">
					<div>no picture result！</div>
				</div>

			</div>

		</div>

	</div>

	<script>

			$(function () {

				Enrich.init

			})

	</script>


}
